<template>
  <div>
    <VForm
      ref="formRef"
      :model="model"
      :fieldList="fieldList"
      :options="formOption"
      :originOption="options"
      id="报关参数"
    >
      <template #supplyPrice="{ input, value }">
        <SupplyPrice @input="input" :value="value" />
      </template>
    </VForm>

    <FormTitle title="物流面单设置" id="物流面单设置" />
    <div>
      <el-radio :label="0" v-model="logistics_bills_type">API接口面单</el-radio>
    </div>
    <div class="bg-[var(--base-table-header-bg-color)] py-[16px] px-[16px] text-[14px] rounded-[8px]">
      <div class="flex items-center mb-[12px]">
        <span>标签尺寸<span>*</span>：</span>
        <el-select filterable v-model="bill_size">
          <el-option
            v-for="item in options['bill_size']"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <div class="ml-[16px]" v-if="bill_size === 'custom'">
          <NumberRange
            separate="*"
            :check-value="false"
            suffix="cm"
            :max="99999999999999"
          />
        </div>
      </div>

      <div>
        <span>打印连数<span>*</span>：</span>
        <el-select filterable v-model="print_count">
          <el-option
            v-for="item in options['print_count']"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>

    <div>
      <div class="flex items-center mb-[16px]">
        <el-radio :label="1" v-model="logistics_bills_type">
          自定义面单
        </el-radio>
        <el-button type="primary">选择模板</el-button>
        <el-button link type="primary">物流面单设置</el-button>
      </div>
      <div
        v-if="[].length"
        class="flex flex-wrap bg-[#F6FAFF] px-[16px] py-[16px] rounded-[8px]"
      >
        <div class="w-[245px] mr-[16px] mb-[16px]" v-for="item in 4">
          <div class="flex items-center justify-between">
            <span class="text-[14px] leading-[20px] text-[#333] mb-[4px]">
              xxxx物流模板
            </span>
            <div>
              <span>图标</span>
              <span>图标</span>
            </div>
          </div>
          <div>
            <vxe-table
              align="center"
              border="full"
              round
              height="120"
              :data="[{ a: 1 }, { a: 2 }, { a: 4 }, { a: 5 }]"
            >
              <vxe-column field="name" title="默认"></vxe-column>
              <vxe-column field="role" title="使用国家"></vxe-column>
              <vxe-column field="a1" title="编辑"></vxe-column>
            </vxe-table>
          </div>
        </div>
      </div>
    </div>

    <FormTitle title="报关单设置" id="报关单设置" />

    <div class="pb-[16px]">
      <div>
        <el-radio :label="0">默认报关单</el-radio>
      </div>
      <div>
        <div>
          <el-radio :label="1">自定义面单：</el-radio>
          <el-select> </el-select>
          <el-button class="ml-[8px]" link type="primary">
            报关面单设置
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="jsx">
import FormTitle from "@/components/Form/FormTitle.vue";
import VForm from "@/components/Form/index.vue";
import NumberRange from "@/components/NumberRange/index.vue";
import SupplyPrice from "./components/SupplyPrice/index.vue";

const model = ref({});
const logistics_bills_type = ref();
const print_count = ref();
const bill_size = ref();

const props = defineProps({
  options: { type: Object, default: () => ({}) },
  data: { type: Object, default: () => ({}) },
});

const fieldList = [
  { type: "title", label: "报关参数" },
  {
    field: "declare_rules_id",
    label: "包裹物流申报规则",
    type: "select",
    origin: "map.declare-rules",
    tooltip: `用于缺货订单也会同步到物流，是否支持提前获取跟踪单号`,
    options: {
      valueKey: "declare_rules_id",
      labelKey: "rule_name",
    },
  },
  { type: "br" },
  {
    field: "supply_price",
    label: "供货价转换",
    slot: "supplyPrice",
  },
  { type: "br" },
  {
    field: "is_advance_duty",
    label: "是否预付关税",
    type: "radio",
    originField: "is_advance_duty",
  },
  { type: "br" },
  {
    field: "is_print_declare_bill",
    label: "是否打印报关单",
    type: "radio",
    originField: "is_print_declare_bill",
  },
  { type: "br" },

  {
    field: "is_vat",
    label: "是否启用vat清关服务",
    type: "radio",
    originField: "is_vat",
    originField: "is_vat",
  },
];
watch(
  () => props.data,
  (val) => {
    const { declare_rules_id } = val || {};
    model.value = {
      declare_rules_id,
    };
  }
);
const formOption = {
  inline: true,
  labelPosition: "top",
};
const formRef = ref();

const submit = () => {
  return new Promise(async (resolve, reject) => {
    try {
      const formInfo = await formRef.value.submit();
      const { declare_rules_id } = formInfo || {};
      resolve({
        declare_rules_id,
      });
    } catch (e) {
      console.error(e);
      reject("additional");
    }
  });
};

defineExpose({ submit });
</script>

<style lang="scss" scoped>
.supply-wrap {
  :deep(.el-checkbox__label) {
    display: flex;
    align-items: center;
  }
  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #333;
  }
}
</style>
